<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>
<div>
    <div class="layui-row">
        <div class="layui-col-md3">
            <div class="layui-carousel" id="GoodsCarousel" lay-filter="GoodsCarousel">
                <div carousel-item="">
                    <div><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><img th:src="@{/img/s.jpg}" /></a></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div th:text="${g.name}" style="font-size: 26px"></div>
            <div th:text="'价格:'+${g.currentPrice}"></div>
            <div th:text="'库存'+${g.num}"></div>
            <input type="hidden" th:value="${g.id}" id="gid" name="gid">
            <div>
                <a class="layui-btn" id="buyBtn" lay-submit="" lay-filter="buyBtn" onclick="getOrder()">
                    <i class="layui-icon layui-icon-cart">立即购买</i>
                </a>
            </div>
            <div id="collect">

            </div>
        </div>
        <div class="layui-col-md7">
            <fieldset class="layui-elem-field">
                <legend>评论</legend>
                <div class="layui-field-box" style="height: 400px" >
                    <div class="layui-row" id="comment">
                    </div>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="layui-row">
        <fieldset class="layui-elem-field">
            <legend>商品详情</legend>
            <div class="layui-field-box">
                放入图片和数据
            </div>
        </fieldset>
    </div>
</div>
<script>
    var $,layer;
    layui.use(['element','jquery','carousel','layer'],function() {
        var elem = layui.element, carousel = layui.carousel;
        $ = layui.jquery;
        layer = layui.layer;



        carousel.render({
            elem:'#GoodsCarousel',
            width:'300px',//设置容器宽度
            height:'400px',
            arrow:'always',//显示箭头
        })
        var gid = $('#gid').val();
        findComment(gid);
        findCollect();


        //不知道为什么用不了   因为不在form表单里,你真是个傻逼
        /*form.on('submit(buyBtn)',function (obj) {
            alert("form");
        })*/

    })
    /*<a class="layui-btn layui-btn-warm" id="collectBtn" lay-submit="" lay-filter="collectBtn" onclick="getCollect()">
                    <i class="layui-icon layui-icon-rate">马上收藏</i>
                </a>*/
    function findCollect() {
        var gid = $('#gid').val();
        $.ajax({
            type:'post',
            url:'/system/fac/find',
            data:{
                gId:gid,
                mId:1//TODO 暂无登录
            },
            dataType:'json',
            success:function (result) {
                if (result.data.length != 0){
                    $('#collect').empty();
                    var c = '<a class="layui-btn layui-btn-warm" id="collectBtn" lay-submit="" lay-filter="collectBtn" onclick="delectCollect()">\n' +
                        '        <i class="layui-icon layui-icon-rate-solid">取消收藏</i>\n' +
                        '    </a>'
                    $('#collect').append(c);
                }else {
                    $('#collect').empty();
                    var c = '<a class="layui-btn layui-btn-warm" id="collectBtn" lay-submit="" lay-filter="collectBtn" onclick="getCollect()">\n' +
                        '         <i class="layui-icon layui-icon-rate">马上收藏</i>\n' +
                        '    </a>'
                    $('#collect').append(c);
                }
            }
        })
    }

    //马上收藏
    function getCollect() {
        var gid = $('#gid').val();
        $.ajax({
            type:'post',
            url:'/system/fac/add',
            data:{
                gId:gid,
                mId:1//TODO 暂无登录
            },
            dataType:'json',
            success:function (result) {
                layer.msg("收藏成功");
                if (result.is){
                    $('#collect').empty();
                    var c = '<a class="layui-btn layui-btn-warm" id="collectBtn" lay-submit="" lay-filter="collectBtn" onclick="delectCollect()">\n' +
                    '        <i class="layui-icon layui-icon-rate-solid">取消收藏</i>\n' +
                    '    </a>'
                    $('#collect').append(c);
                }
            }
        })
    }

    //取消收藏
    function delectCollect() {
        var gid = $('#gid').val();
        $.ajax({
            type:'post',
            url:'/system/fac/delete',
            data:{
                gId:gid,
                mId:1//TODO 暂无登录
            },
            dataType:'json',
            success:function (result) {
                layer.msg(result.msg);
                if (result.is){
                    $('#collect').empty();
                    var c = '<a class="layui-btn layui-btn-warm" id="collectBtn" lay-submit="" lay-filter="collectBtn" onclick="getCollect()">\n' +
                        '         <i class="layui-icon layui-icon-rate">马上收藏</i>\n' +
                        '    </a>'
                    $('#collect').append(c);
                }
            }
        })
    }


    //弹出填写订单界面
    function getOrder() {
        var gid = $('#gid').val()
        var mid = 1;
        var b = false;
        top.layer.open({
            type:2,
            content:'/page/userIndex/OrderAdd/'+mid+'/'+gid,//TODO 暂时没有登录 mid默认1
            area:['700px','750px'],
            btn:['去支付','加入购物车','返回'],
            btn1:function (i,o) {
                b = true;
                o.find('iframe')[0].contentWindow.payBtnSubmit();
            },
            btn2:function (i,o){
                b = true;
                o.find('iframe')[0].contentWindow.cartBtnSubmit();
            },
            end:function (i,o) {
                if(b) layui.table.reload('memberTable');
            }
        })
    }

    //获取评论并显示在页面上
    function findComment(gid) {
        $.ajax({
            type:'post',
            url:'/comment/ct/find',
            data:{
                gid:gid,
                limit:8
            },
            dataType:'json',
            success:function (res) {
                var comment = $('#comment');
                comment.empty();
                $.each(res.data,function (i,data) {
                    var text = '<div class="layui-col-md6" style="font-size: 18px;color: red">'+data.mname+'</div>\n' +
                        ' <div class="layui-col-md12">'+data.content+'</div>'
                    comment.append(text);
                })
            }
        })
    }
</script>
</body>
</html>